<template>
	<view class="school">
		<view class="txt_div">
			<text class="t_txt1">{{schoolName}}</text>
			<text class="t_txt2" @click="changeStatus" v-if="empId">切换</text>
		</view>
		<view class="s_bc">
			<image class="sb_img" src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3238317745,514710292&fm=26&gp=0.jpg"></image>
		</view>
		<view class="s_list">
			<view class="sl_item" v-for="(item, index) in list" :key="index" @click="jumpItem(item)">
				<image class="sli_img" src="/static/images/chongzhi.png"></image>
				<text class="sli_txt">{{item.subjectName}}</text>
			</view>
			<view class="sl_item" @click="jumpJF" v-if="showFlag">
				<image class="sli_img" src="/static/images/jfrecode.png"></image>
				<text class="sli_txt">缴费记录</text>
			</view>
		</view>
		<view class="boxsss" v-if="showBox">
			<view class="modal_boxs">
				<view style="padding: 40rpx 20rpx;display: flex;justify-content: center;align-items: center;">
					<text class="modal_box">请选择机构</text>
				</view>
				<view>
					<view class="uni-list">
						<input style="width: 70%;" v-model="selectName" type="text" placeholder-class="account-txt" class="uni-input" placeholder="请输入机构名称" />
					</view>
					<view v-if="isValue" class="list_box" :style="{height: schCount > 10 ? '480rpx': 'auto', overflow: schCount > 10 ? 'scroll' : ''}">
						<view @click.stop="cliName(item)" v-for="(item, ind) in sList" :key="ind">
							<text style="font-size: 26rpx;">{{item.orgName}}</text>
						</view>
						<text class="tishiTxt" v-if="schCount == 0">{{schErrTxt}}</text>
						<view style="display: flex;flex-direction: row;">
							<text @click="toCancel" class="tishiTxt more" v-if="schCount > 10">关闭</text>
						</view>
					</view>
				</view>
				<view style="display: flex;flex-direction: row;justify-content: space-around;">
					<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="cancel">取消</button>
					<button type="primary" class="btn_pri" style="background-color: #477EDA;" @click="queren">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getPaySubject,queryOrg} from '../../common/api/index.js';
	export default {
		onShow:function(){
			this._getPaySubject()
		},
		onLoad:function(option){
			this.schoolName = option.orgName
			this.orgId = option.orgId
			this.empId = option.empId
			this.empName = option.empName
			this.idCard = option.idCard
		},
		computed: {
			sList() {
				if(this.schCount == 0 && !this.isMore) {
					return this.schoolList = []
				}
				if(this.schCount <= 10 && !this.isMore) {
					return this.schoolList
				}
				if(this.schCount > 10 && !this.isMore) {
					return this.schoolList
				}
				if(this.schCount > 10 && this.isMore) {
					return this.schoolList
				}
			}
		},
		watch: {
			selectName(newVal, oldVal) {
				if(newVal.length >= 4) {
					return;
				} else {
					this.onInput(newVal)
				}
			}
		},
		data() {
			return {
				selectName: '',
				schoolName: '测试中学',
				showBox: false,
				isValue: false,
				schoolList: [],
				schCount: 0,
				schErrTxt: '',
				orgId: '4500001',
				list: [],
				showFlag: false,
				empId: '',
				empName: '',
				idCard: ''
			}
		},
		methods: {
			jumpJF() {
				if(this.empId == undefined) {
					uni.showModal({
						title: '操作提示',
						content: '请先绑定学生',
						showCancel: true,
						confirmText: '去绑定',
						success: function (res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '../car/bind'
								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				} else {
					uni.navigateTo({
						url: '../recode/jfRecode?orgId=' + this.orgId + '&empId=' + this.empId
					})
				}
				
			},
			changeStatus() {
				this.showBox = true
			},
			cancel() {
				this.showBox = false
			},
			queren() {
				this.schoolName = this.selectName;
				this.showBox = false;
				this._getPaySubject()
			},
			_getQueryOrg(name) {
				queryOrg({
					orgName: name
				}).then(res => {
					if(res.code == 0) {
						this.isValue = true;
						if(res.data.length == 0) {
							this.schErrTxt = '无结果';
							this.schCount = res.data.length;
						} else {
							this.schoolList = res.data;
							this.schCount = res.data.length;
							this.schSuccTxt = '查看更多';
						}
					} else {
						uni.showModal({
							title: '温馨提示',
							content: `${res.msg}`,
							showCancel:false
						})
					}
				}).catch(err => {
					uni.showModal({
						title: '温馨提示',
						content: '系统错误!',
						showCancel:false
					})
				})
			},
			toCancel() {
				this.isValue = false
			},
			onInput(name) {
				this._getQueryOrg(name)
			},
			cliName(obj) {
				this.selectName = obj.orgName;
				this.orgId = obj.orgId;
				this.orgName = obj.orgName;
				this.isValue = false;
			},
			_getPaySubject() {
				uni.showLoading({
					title: '加载中...'
				})
				// #ifdef H5
				getPaySubject({
					orgId: this.orgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						if(res.data.length == 0) {
							uni.showModal({
								title: '操作提示',
								content: '该机构不支持缴费功能~',
								showCancel: false,
								confirmText: '确定',
								success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/home/home'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.list = res.data
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				/* uni.request({
					method: 'POST',
					url: '/repaid/getPaySubject',
					data: {
						orgId: this.orgId,
						typeCode: 'PT_FEE'
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							uni.hideLoading()
							if(res.data.data.length == 0) {
								uni.showModal({
									title: '操作提示',
									content: '该学校不支持缴费功能~',
									showCancel: false,
									confirmText: '确定',
									success: function (res) {
										if (res.confirm) {
											uni.switchTab({
												url: '/pages/home/home'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								this.list = res.data.data
								this.showFlag = true
							}
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				}) */
				// #endif
				// #ifdef MP-WEIXIN
				getPaySubject({
					orgId: this.orgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						if(res.data.length == 0) {
							uni.showModal({
								title: '操作提示',
								content: '该机构不支持缴费功能~',
								showCancel: false,
								confirmText: '确定',
								success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/home/home'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.list = res.data
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				/* uni.request({
					method: 'POST',
					url: 'https://sndcard.com/repaid/getPaySubject',
					data: {
						orgId: this.orgId,
						typeCode: 'PT_FEE'
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							uni.hideLoading()
							if(res.data.data.length == 0) {
								uni.showModal({
									title: '操作提示',
									content: '该学校不支持缴费功能~',
									showCancel: false,
									confirmText: '确定',
									success: function (res) {
										if (res.confirm) {
											uni.switchTab({
												url: '/pages/home/home'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								this.list = res.data.data
								this.showFlag = true
							}
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				}) */
				// #endif
				// #ifdef MP-ALIPAY
				getPaySubject({
					orgId: this.orgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						if(res.data.length == 0) {
							uni.showModal({
								title: '操作提示',
								content: '该机构不支持缴费功能~',
								showCancel: false,
								confirmText: '确定',
								success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/home/home'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.list = res.data
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				/* uni.request({
					method: 'POST',
					url: 'https://sndcard.com/repaid/getPaySubject',
					data: {
						orgId: this.orgId,
						typeCode: 'PT_FEE'
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							uni.hideLoading()
							if(res.data.data.length == 0) {
								uni.showModal({
									title: '操作提示',
									content: '该学校不支持缴费功能~',
									showCancel: false,
									confirmText: '确定',
									success: function (res) {
										if (res.confirm) {
											uni.switchTab({
												url: '/pages/home/home'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								this.list = res.data.data
								this.showFlag = true
							}
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				}) */
				// #endif
				// #ifdef APP-PLUS
				getPaySubject({
					orgId: this.orgId,
					typeCode: 'PT_FEE'
				}).then(res => {
					if(res.code == 0) {
						uni.hideLoading()
						if(res.data.length == 0) {
							uni.showModal({
								title: '操作提示',
								content: '该机构不支持缴费功能~',
								showCancel: false,
								confirmText: '确定',
								success: function (res) {
									if (res.confirm) {
										uni.switchTab({
											url: '/pages/home/home'
										})
									} else if (res.cancel) {
										console.log('用户点击取消');
									}
								}
							});
						} else {
							this.list = res.data
							this.showFlag = true
						}
					} else {
						uni.hideLoading()
					}
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
				/* uni.request({
					method: 'POST',
					url: 'https://sndcard.com/repaid/getPaySubject',
					data: {
						orgId: this.orgId,
						typeCode: 'PT_FEE'
					},
					header: { 'content-type': 'application/json' },
					success: (res) => {
						if(res.data.code == 0) {
							uni.hideLoading()
							if(res.data.data.length == 0) {
								uni.showModal({
									title: '操作提示',
									content: '该学校不支持缴费功能~',
									showCancel: false,
									confirmText: '确定',
									success: function (res) {
										if (res.confirm) {
											uni.switchTab({
												url: '/pages/home/home'
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							} else {
								this.list = res.data.data
								this.showFlag = true
							}
						} else {
							uni.hideLoading()
						}
					},
					fail: (err) => {
						uni.hideLoading()
						console.log(err)
					}
				}) */
				// #endif
			},
			jumpItem(obj) {
				if(obj.subjectName == '学费') {
					uni.navigateTo({
						url: './tuition?objParams=' + encodeURIComponent(JSON.stringify(obj)) + '&orgName=' +this.schoolName + '&orgId=' + this.orgId + '&empName=' + this.empName + '&idCard=' + this.idCard
					})
				} else {
					uni.navigateTo({
						url: './tuition?objParams=' + encodeURIComponent(JSON.stringify(obj)) + '&orgName=' +this.schoolName + '&orgId=' + this.orgId + '&empName=' + this.empName + '&idCard=' + this.idCard
					})
				}
			}
		}
	}
</script>

<style>
	page {
		background-color: #FFFFFF;
	}
	.s_bc {
		width: 100%;
		height: 500rpx;
	}
	.sb_img {
		width: 100%;
		height: 100%;
	}
	.tishiTxt {
		font-size: 24rpx;
		color: #ddd;
		display: flex;
		flex: 1;
		justify-content: center;
		align-items: center;
	}
	.btn_pri {
		border-radius: 10rpx;
		margin: 30rpx 0;
		height: 70rpx;
		line-height: 70rpx;
		text-align: center;
		width: 30%;
		font-size: 26rpx;
		color: #FFFFFF;
		box-shadow: rgba(25, 94, 215, 0.4) 0px 4px 6px 1px;
	}
	.more {
		background-color: #477EDA;
		line-height: 55rpx;
	}
	.list_box {
		width: 61%;
		position: absolute;
		padding: 20rpx;
		border: 0.5rpx solid rgba(0, 0, 0, 0.1);
		border-top: none;
		top: 510rpx;
		z-index: 9999;
		background-color: #ffffff;
		box-shadow: 5px 5px 5px rgba(215, 215, 215, 0.349019607843137);
		left: 125rpx;
	}
	.boxsss {
		width: calc(100% - 40rpx);
		height: 100%;
		display: block;
		position: fixed;
		top: 0rpx;
		left: 0rpx;
		background-color: rgba(102, 102, 102, 0.498039215686275);
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 0 20rpx;
		z-index: 999;
	}
	.modal_boxs {
		width: 70%;
		display: flex;
		flex-direction: column;
		background-color: rgba(252, 252, 252, 1);
		border-radius: 10rpx;
		margin-top: -270rpx;
	}
	.uni-list {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.txt_div {
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 20rpx;
	}
	.t_txt1 {
		font-family: "PingFangSC";
		font-weight: 500;
		font-size: 32rpx;
		color: rgb(87, 86, 85);
	}
	.t_txt2 {
		font-family: "PingFangSC";
		font-weight: 400;
		font-size: 26rpx;
		color: blue;
		margin: 0 10rpx;
	}
	.s_list {
		display: flex;
		justify-content: space-around;
		align-items: center;
		flex-direction: row;
		padding: 50rpx;
	}
	.sl_item {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
	}
	.sli_img {
		width: 100rpx;
		height: 100rpx;
		margin-bottom: 20rpx;
	}
	.sli_txt {
		font-family: "PingFangSC";
		font-weight: 500;
		font-size: 32rpx;
		color: rgb(87, 86, 85);
	}
</style>
